<template>
	<div class="app">
		<div class="job-item" v-for="(item, index) in jobItems" :key="index">
			<div class="job-item-header">
				<div :class="'job-type '+(item.type.id !== 1 ? 'job-type-gig':'job-type-hourly')">
					<span>{{item.type.title}}</span>
				</div>
				<span class="job-item-title">{{item.title}}</span>
			</div>


			<div class="job-item-dateNamount">
				<span style="color: gray;">{{item.date}}</span>
				<span>￥<span style="color:#FF9E24;">{{item.amount}}</span>/月</span>
			</div>


			<div class="job-item-recruitment">
				<div>
					<span>{{item.recruitment.need}}</span>
					<span>招聘人数</span>
				</div>
				<div>
					<span>{{item.recruitment.total}}</span>
					<span>申请人数</span>
				</div>
				<div>
					<span>{{item.recruitment.pass}}</span>
					<span>已录用人数</span>
				</div>
			</div>


			<div class="job-item-footer">
				<span
					:class="'job-item-status '+(item.status.id === 1 ? 'recruiting':'stophiring')">{{item.status.title}}</span>
			</div>

		</div>
		<scroll-view scroll-x>
			<div style="display: flex;flex-wrap: nowrap;">
				<div style="padding:0 1rem;word-break: keep-all;">全部</div>
				<div style="padding:0 1rem;word-break: keep-all;">已申请</div>
				<div style="padding:0 1rem;word-break: keep-all;">不录用</div>
				<div style="padding:0 1rem;word-break: keep-all;">已录用</div>
				<div style="padding:0 1rem;word-break: keep-all;">已到岗</div>
				<div style="padding:0 1rem;word-break: keep-all;">未到岗</div>
			</div>


			<div style="display: flex;justify-content: flex-end; gap:.25rem;padding: .5rem 1rem;">
				<div style="font-size: 12px;padding: .25rem 1rem;background-color:rgb(236, 236, 236);border-radius: 10rem;font-weight: 900;"
					@click="toggleBatchEdit">{{isBatchEdit ? '退出批量编辑' : '批量操作'}}</div>
				<div style="font-size: 12px;padding: .25rem 1rem;background-color:rgb(236, 236, 236);border-radius: 10rem;font-weight: 900;"
					v-if="isBatchEdit" @click="selectAll">{{isSelectedAll ? '取消全选' : '全选'}}</div>
				<div style="font-size: 12px;padding: .25rem 1rem;background-color: #FF9E24;color:white;border-radius: 10rem;font-weight: 900;"
					v-if="isBatchEdit" @click="finishBatchEdit">完成</div>
			</div>
			<scroll-view scroll-y style="height: 300px;">
				<div style="display: flex;flex-direction: column;">
					<div style="display: flex;align-items: center;padding:1rem;" v-for="(item, index) in applicantItems"
						:key="index">
						<div v-if="isBatchEdit">
							<checkbox :checked="item.isSeleted" />
						</div>
						<div
							style="display: flex;flex-direction: column;gap: 1rem;background-color: white; word-break: keep-all;width: 100%;">
							<div style="display: flex;justify-content: space-between;">
								<div style="display: flex;gap: .25rem;">
									<div class="image">
<!--										<img src="../../images/defultAvatar-1.png" mode=""-->
<!--											style="width: 50px; height: 100%;" />-->
									</div>
									<div style="display: flex;flex-direction: column;gap: .25rem;">
										<div>
										</div>
										<div style="display: flex;gap: .25rem;">
											<span>{{item.name}}</span>
<!--											<div class="contant_us"><img src="../../images/man.png" mode=""-->
<!--													style="width: 25px; height: 80%;" /></div>-->
											<span class="real-name"
												:style="'font-size: 12px;line-height: 1.5rem; padding: 0 .5rem; '+(item.isRealname ? 'color:#9B7748;':'color: red;')">{{item.isRealname ? '已实名':'未实名'}}</span>
										</div>
										<div class="b-desc" style="display: flex;gap: .25rem;">
											<div class="text"> <span style="padding:0 2px">{{item.age}}</span></div>
											<div class="text"> <span style="padding:0 2px">{{item.degree}}</span></div>
											<div class="text"> <span>{{item.worktime}}经验</span></div>
										</div>
									</div>

								</div>
								<div style="display: flex;flex-direction: column;align-items: flex-end;">
									<span
										style="width:fit-content;display: flex;align-items: center;color: white;padding: 0 .5rem;border-radius: .3rem;background-color: #34A1FF;">{{item.applicantType}}</span>
									<span style="color:gray">{{item.location}}</span>
								</div>
							</div>
							<div style="display: flex;justify-content: space-between; ">
								<div style="display: flex;gap: 0.25rem;align-items: center;">
									<span style="font-size:12px;color:gray">意向</span>
									<span>{{item.intention}}</span>
								</div>
								<div>
									<span>￥</span>
									<span style="color:#FF9E24">{{item.amount}}</span>
								</div>
							</div>
							<div style="display: flex;justify-content: space-between;">
								<span style="color:#FF9E24">{{item.isApplicant ? "已申请":"未申请"}}</span>
								<div style="display: flex;gap: 0.25rem;">
									<div
										style="font-size: 12px;padding: .25rem 1rem;border: 1px solid gray;border-radius: 10rem;font-weight: 900;">
										录用</div>
									<div
										style="font-size: 12px;padding: .25rem 1rem;border: 1px solid gray;border-radius: 10rem;font-weight: 900;">
										拒绝</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</scroll-view>
		</scroll-view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isBatchEdit: false, // 是否进入批量编辑模式
				isSelectedAll: false, // 是否全选
				applicantItems: [{
					name: "赵小宝",
					isRealname: true,
					applicantType: "零工兼职",
					location: "天河区-东圃",
					intention: "客房主管",
					amount: "0.8k - 10k",
					isApplicant: true,
					age: 25,
					degree: "本科",
					worktime: "3年",
					isSeleted: true
				}, {
					name: "赵小宝",
					isRealname: true,
					applicantType: "零工兼职",
					location: "天河区-东圃",
					intention: "客房主管",
					amount: "0.8k - 10k",
					isApplicant: true,
					age: 25,
					degree: "本科",
					worktime: "3年",
					isSeleted: true
				}, {
					name: "赵小宝",
					isRealname: true,
					applicantType: "零工兼职",
					location: "天河区-东圃",
					intention: "客房主管",
					amount: "0.8k - 10k",
					isApplicant: true,
					age: 25,
					degree: "本科",
					worktime: "3年",
					isSeleted: false
				}, {
					name: "赵小宝",
					isRealname: true,
					applicantType: "零工兼职",
					location: "天河区-东圃",
					intention: "客房主管",
					amount: "0.8k - 10k",
					isApplicant: true,
					age: 25,
					degree: "本科",
					worktime: "3年",
					isSeleted: true
				}, {
					name: "赵小宝",
					isRealname: true,
					applicantType: "零工兼职",
					location: "天河区-东圃",
					intention: "客房主管",
					amount: "0.8k - 10k",
					isApplicant: true,
					age: 25,
					degree: "本科",
					worktime: "3年",
					isSeleted: false
				}, ],
				jobItems: [{
					title: "客房主管",
					type: {
						id: 2,
						title: "零工兼职"
					},
					date: "2022-1-20",
					amount: '3200.00',
					recruitment: {
						need: 12,
						total: 168,
						pass: 12,
					},
					status: {
						id: 1,
						title: "招聘中"
					}
				}],
			};
		},
		methods: {
			// 切换批量编辑模式
			toggleBatchEdit() {
				this.isBatchEdit = !this.isBatchEdit;
				this.isSelectedAll = false; // 进入批量编辑模式时重置全选状态
			},
			// 全选/取消全选
			selectAll() {
				const {
					isSelectedAll,
					applicantItems
				} = this;
				const newApplicantItems = applicantItems.map(item => {
					item.isSelected = !isSelectedAll;
					return item;
				});
				this.isSelectedAll = !isSelectedAll;
				this.applicantItems = newApplicantItems;
			},
			// 完成批量编辑
			finishBatchEdit() {
				// 在这里编写完成批量编辑的逻辑，例如提交选中的申请者信息等
				const selectedApplicants = this.applicantItems.filter(item => item.isSelected);
				console.log("选中的申请者信息：", selectedApplicants);
				// 完成后可以退出批量编辑模式
				this.isBatchEdit = false;
			},
			// 其他函数和生命周期方法...
		}
	};
</script>
<style scoped>
	.app {
		background-color: hsl(0, 0%, 98%);
		height: 80vh;
		display: flex;
		flex-direction: column;
	}

	.job-item {
		margin: 1rem;
		padding: 1rem;
		background: #fff;
	}

	.job-item>view {
		margin: 1rem 0;
	}

	.job-item-header {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	.job-item-title {
		font-size: 24px;
	}

	.job-type {
		display: flex;
		align-items: center;
		color: white;
		padding: 0 .5rem;
		border-radius: .3rem;
	}

	.job-type-gig {
		background-color: #34A1FF;
	}

	.job-type-hourly {
		background-color: #F32763;
	}

	.job-item-dateNamount {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.job-item-recruitment {
		background-color: hsl(0, 0%, 98%);
		display: flex;
		justify-content: space-around;
		padding: 1rem;
	}

	.recruiting {
		color: #317ED0;
	}

	.job-item-recruitment>view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.job-item-recruitment>view>text:nth-child(2) {
		color: gray;
	}

	.job-item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.job-item-status {
		font-weight: 900;
	}

	.job-item-footer>.operation {
		display: flex;
		gap: 10px;
	}

	.job-item-footer>.operation>.button {
		font-size: 12px;
		padding: .25rem 1rem;
		border: 1px solid gray;
		border-radius: 10rem;
		font-weight: 900;
	}

	.operation {
		display: flex;
		gap: 20px;
		color: #00000073;
	}

	.real-name {
		border-radius: .5rem;
		background: #ffebd1;
	}
</style>